<template>
    <div class="outmain ba_f tablemange">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>桌位管理</span>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="桌位管理" name="table">
                <div class="flex flex-y-top mar_t20">
                    <div class="mar_r40">
                        <el-button type="primary" size="medium" @click="handleEdit">新增桌位</el-button>
                        <el-button size="medium" @click="batchEdit">批量新增桌位</el-button>
                        <el-button size="medium" @click="handleDelete" type="danger" plain>批量删除</el-button>
                    </div>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                        <div class="mar_b20">
                            <el-form-item label="所属区域：" class="mar_l10">
                                <el-select v-model="formInline.areaId" clearable placeholder="请选择" @change="onSearch">
                                    <el-option
                                            v-for="item in qyOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                            >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="桌位类型：" class="mar_l10">
                                <el-select v-model="formInline.typeId" clearable placeholder="请选择" @change="onSearch">
                                    <el-option
                                            v-for="item in typeOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                            >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="formInline.keyword" size="medium" placeholder="请输入桌位编号查询" style="width: 180px"
                                          @input="onSearch"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="tabledata mar_t20">
                    <el-table
                            v-loading="listLoading"
                            :data="list"
                            :element-loading-text="elementLoadingText"
                            stripe
                            style="width: 100%"
                            @selection-change="setSelectRows">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="sort"-->
<!--                                label="排序"-->
<!--                        >-->
<!--                        </el-table-column>-->
                        <el-table-column
                                prop="areaName"
                                label="所属区域"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="typeName"
                                label="桌位类型"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="桌位编号"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="createdAt"
                                label="人数区间"
                        >
                            <template slot-scope="scope">
                                {{scope.row.minNum}}-{{scope.row.maxNum}}人
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="display"
                                label="状态"
                        >
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                           @change="changeSwitch(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                      <el-table-column
                          prop="display"
                          label="小程序链接"
                          width="300"
                      >
                        <template slot-scope="scope">
                         <div>yb_wm/shop/in/goods?scene={{scope.row.id}}</div>
                        </template>
                      </el-table-column>
                        <el-table-column
                                label="操作"
                        >
                            <template slot-scope="scope">
                                <div class="flex">
                                    <el-button type="text" @click="seeCode(scope.row)">查看小程序码</el-button>
                                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="page.total"
                            :page-size="page.pagesize"
                            :current-page.sync='page.currentPage'
                            @current-change="handleCurrentChange">
                    </el-pagination>
                    <edit ref="edit" @fetchData="fetchData"></edit>
                    <seeCode ref="seeCode" @fetchData="fetchData"></seeCode>
                    <batchEdit ref="batchEdit" @fetchData="fetchData"></batchEdit>
                </div>
            </el-tab-pane>
            <el-tab-pane label="区域管理" name="tablearea">
                <div class="flex flex-y-top mar_t20">
                    <div class="mar_r40">
                        <el-button type="primary" size="medium" @click="handleEdit">新增区域</el-button>
                        <el-button size="medium" @click="handleDelete2" type="danger" plain>批量删除</el-button>
                    </div>
                    <el-form :inline="true" :model="formInline2" class="demo-form-inline searchform">
                        <div class="mar_b20">
                            <el-form-item label="">
                                <el-input v-model="formInline2.keyword" size="medium" placeholder="请输入关键字搜索" style="width: 180px"
                                          @input="onSearch"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" size="medium" @click="onSearch">搜索</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="tabledata mar_t20">
                    <el-table
                            v-loading="listLoading"
                            :data="list2"
                            :element-loading-text="elementLoadingText"
                            stripe
                            style="width: 100%"
                            @selection-change="setSelectRows2">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="sort"
                                label="排序"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="区域名称"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="tableNum"
                                label="桌位数量"
                        >
                            <template slot-scope="scope">
                              <div>
                                  <span class="subjectcolor2" v-if="+scope.row.tableNum>0">{{scope.row.tableNum}}</span>
                                  <span v-else>--</span>
                              </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="display"
                                label="状态"
                        >
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                           @change="changeSwitch2(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                        >
                            <template slot-scope="scope">
                                <div class="flex">
                                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="handleDelete2(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="page2.total"
                            :page-size="page2.pagesize"
                            :current-page.sync='page2.currentPage'
                            @current-change="handleCurrentChange2">
                    </el-pagination>
                    <tableAreaEdit ref="tableAreaEdit" @fetchData="fetchData2"></tableAreaEdit>
                </div>
            </el-tab-pane>
            <el-tab-pane label="桌位类型" name="tabletype">
                <div class="flex flex-y-top mar_t20">
                    <div class="mar_r40">
                        <el-button type="primary" size="medium" @click="handleEdit">新增桌位类型</el-button>
                        <el-button size="medium" @click="handleDelete3" type="danger" plain>批量删除</el-button>
                    </div>
                    <el-form :inline="true" :model="formInline3" class="demo-form-inline searchform">
                        <div class="mar_b20">
                            <el-form-item label="">
                                <el-input v-model="formInline3.keyword" size="medium" placeholder="请输入关键字搜索" style="width: 180px"
                                          @input="onSearch"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" size="medium" @click="onSearch">搜索</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="tabledata mar_t20">
                    <el-table
                            v-loading="listLoading"
                            :data="list3"
                            :element-loading-text="elementLoadingText"
                            stripe
                            style="width: 100%"
                            @selection-change="setSelectRows3">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="sort"
                                label="排序"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="桌位类型"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="人数区间"
                        >
                            <template slot-scope="scope">
                                <div>{{scope.row.minNum}}-{{scope.row.maxNum}}人</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="display"
                                label="状态"
                        >
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                           @change="changeSwitch3(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                        >
                            <template slot-scope="scope">
                                <div class="flex">
                                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="handleDelete3(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="page3.total"
                            :page-size="page3.pagesize"
                            :current-page.sync='page3.currentPage'
                            @current-change="handleCurrentChange3">
                    </el-pagination>
                    <tableTypeEdit ref="tableTypeEdit" @fetchData="fetchData3"></tableTypeEdit>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import Edit from "./components/tableedit";
    import seeCode from "./components/seecode";
    import batchEdit from "./components/batchtableedit";
    import tableAreaEdit from "./components/tableareaedit";
    import tableTypeEdit from "./components/tabletypeedit";
    import {tableList,getArea,getType,modifyTable ,areaList,modifyArea, typeList,modifyType} from "@/api/instore";

    export default {
        components: {Edit, batchEdit,tableAreaEdit,tableTypeEdit,seeCode},
        created() {
            if(this.activeName=='table'){
                this.getArea()
                this.getType()
                this.fetchData()
            }else if(this.activeName=='tablearea'){
                this.fetchData2()
            }else if(this.activeName=='tabletype'){
                this.fetchData3()
            }
        },
        data() {
            return {
                activeName:'table',
                formInline: {
                    keyword: '',
                    areaId: '',
                    typeId: '',
                    label: ''
                },
                qyOptions: [],
                typeOptions: [],
                list: [],
                listLoading: false,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                formInline2: {
                    keyword: '',
                    typeId: '',
                    type: '',
                    areaId: '',
                    label: ''
                },
                list2: [],
                selectRows2: "",
                page2: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                formInline3: {
                    keyword: '',
                },
                list3: [],
                selectRows3: "",
                page3: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async getArea() {
                const {data} = await getArea();
                this.qyOptions = data ? data : []
                this.qyOptions.unshift({id:'',name:'全部'})
            },
            async getType() {
                const {data} = await getType();
                this.typeOptions = data ? data : []
                this.typeOptions.unshift({id:'',name:'全部'})
            },
            async fetchData() {
                const {data, count} = await tableList({
                    page: this.page.currentPage,
                    keyword: this.formInline.keyword,
                    areaId: this.formInline.areaId,
                    typeId: this.formInline.typeId
                });
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            async fetchData2() {
                const {data, count} = await areaList({page: this.page2.currentPage, keyword: this.formInline2.keyword});
                this.list2 = data;
                this.page2.total = count;
                this.listLoading = false;
            },
            async fetchData3() {
                const {data, count} = await typeList({page: this.page3.currentPage, keyword: this.formInline3.keyword});
                this.list3 = data;
                this.page3.total = count;
                this.listLoading = false;
            },
            onSearch() {
                if(this.activeName=='table'){
                    this.fetchData()
                }else if(this.activeName=='tablearea'){
                    this.fetchData2()
                }else if(this.activeName=='tabletype'){
                    this.fetchData3()
                }
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            setSelectRows2(val) {
                this.selectRows2 = val;
            },
            setSelectRows3(val) {
                this.selectRows3 = val;
            },
            handleEdit(row) {
                if(this.activeName=='table'){
                    if (row.id) {
                        this.$refs["edit"].showEdit(row);
                    } else {
                        this.$refs["edit"].showEdit();
                    }
                }else if(this.activeName=='tablearea'){
                    if (row.id) {
                        this.$refs["tableAreaEdit"].showEdit(row);
                    } else {
                        this.$refs["tableAreaEdit"].showEdit();
                    }
                }else if(this.activeName=='tabletype'){
                    if (row.id) {
                        this.$refs["tableTypeEdit"].showEdit(row);
                    } else {
                        this.$refs["tableTypeEdit"].showEdit();
                    }
                }
            },
            seeCode(row){
                if (row.id) {
                    this.$refs["seeCode"].showEdit(row);
                } else {
                    this.$refs["seeCode"].showEdit();
                }
            },
            batchEdit() {
                this.$refs["batchEdit"].showEdit();
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyTable({id: row.id,type: 2});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyTable({id,type: 2});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            handleDelete2(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyArea({id: row.id, type: 2});
                        this.$baseMessage(msg, "success");
                        this.fetchData2();
                    });
                } else {
                    if (this.selectRows2.length > 0) {
                        const id = this.selectRows2.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyArea({id, type: 2});
                            this.$baseMessage(msg, "success");
                            this.fetchData2();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            handleDelete3(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyType({id: row.id,type: 2});
                        this.$baseMessage(msg, "success");
                        this.fetchData3();
                    });
                } else {
                    if (this.selectRows3.length > 0) {
                        const id = this.selectRows3.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyType({id,type: 2});
                            this.$baseMessage(msg, "success");
                            this.fetchData3();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            async changeSwitch(row) {
                const {msg} = await modifyTable({id: row.id, display: row.display,type: 1});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            async changeSwitch2(row) {
                const {msg} = await modifyArea({id: row.id, display: row.display,type: 1});
                this.$baseMessage(msg, "success");
                this.fetchData2();
            },
            async changeSwitch3(row) {
                const {msg} = await modifyType({id: row.id, display: row.display,type: 1});
                this.$baseMessage(msg, "success");
                this.fetchData3();
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            handleCurrentChange2(val) {
                this.page2.currentPage = val;
                this.fetchData2();
            },
            handleCurrentChange3(val) {
                this.page3.currentPage = val;
                this.fetchData3();
            },
            async handleTabClick() {
                switch (this.activeName) {
                    case 'table':
                        this.fetchData();
                        break;
                    case 'tablearea':
                        this.fetchData2();
                        break;
                    case 'tabletype':
                        this.fetchData3();
                        break;
                }
            },
        }
    }
</script>
<style lang="scss">
    .tablemange{
        .el-form-item__content {
            line-height: 36px;
        }
    }
    .el-button.is-plain:focus, .el-button.is-plain:hover {
        background: #F56C6C;
        border-color: #F56C6C;
        color: #fff;
    }
</style>

